/* eslint-disable camelcase */
/* eslint-disable no-dupe-keys */
const packageJson = require('./package.json'),
    Timestamp = new Date().getTime(),
    webpack = require('webpack'),
    path = require('path'),
    // HappyPack 多线程打包
    HappyPack = require('happypack'),
    os = require('os'),
    TerserPlugin = require('terser-webpack-plugin'),
    BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin,
    // 开辟一个线程池，拿到系统CPU的核数，happypack 将编译工作利用所有线程
    happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }),
    CompressionPlugin = require('compression-webpack-plugin');


function resolve(dir) {
    return path.join(__dirname, './', dir);
}
// 设置mock
if (process.argv.includes('--mock')) {
    // mock环境
    process.env.NODE_ENV = 'mock'
} else if (process.argv.includes('--dev')) {
    // 开发环境
    process.env.NODE_ENV = 'development'
} else if (process.argv.includes('--pro')) {
    // 生产环境
    process.env.NODE_ENV = 'production'
}

process.env.VUE_APP_MOCK = process.argv.includes('--mock');
const devConf = {
    // host: '127.0.0.1', //ip地址
    // port: '2100', //端口号
    open: true, // 配置自动启动浏览器
    hot: true,
    // proxy: 'http://localhost:2100' // 配置跨域处理,只有一个代理
    proxy: {
        '/api': {
            target: '<url>',
            pathRewrite: {
                '^/api': ''
            },
            changeOrigin: true
        },
        '/foo': {
            target: '<url>',
            pathRewrite: {
                '^/foo': ''
            },
            changeOrigin: true
        }
    } // 配置多个代理
}
module.exports = {
    devServer: process.argv.includes('--mock') ? {
        open: true, // 配置自动启动浏览器
        hot: true
    } : devConf,
    publicPath: `/${packageJson.name}-${packageJson.version}/`,
    outputDir: `../${packageJson.name}-${packageJson.version}`,
    // assetsDir 放置生成的静态资源 (js、css、img、fonts) 的目录
    // assetsDir: 'assets',
    lintOnSave: true, // vue项目中关闭eslint
    // 如果您不需要生产时的源映射，那么将此设置为false可以加速生产构建
    productionSourceMap: process.env.NODE_ENV === 'production',//生产源映射
    // 配置全局scss文件全局变量
    css: {
        extract: {
            // 提取出的css文件名
            filename: `css/[name].${Timestamp}.css`,
            // 提取出的chunk的css文件名
            chunkFilename: `css/[name].${Timestamp}.css`,
        },
        loaderOptions: {
            // 没有分号会报错
            sass: {
                additionalData: '@import "@/assets/css/var.scss";'
            },
            scss: {
                additionalData: '@import "@/assets/css/var.scss";',
                sassOptions: {
                    outputStyle: 'expanded'
                }
            }
        }
    },
    chainWebpack: config => {
        console.log(process.env.NODE_ENV, '所处环境')
        config.when(process.env.NODE_ENV === 'production', config => {
            config.plugin('html').tap(args => {
                args[0].title = '生产'
                args[0].isProd = true
                return args
            })
            // // externals 提取项目依赖
            // config.set('externals', {
            //     'lodash': '_',
            //     'jquery': '$',
            //     'axios': 'axios',
            //     'vue': 'Vue',
            //     'axios': 'axios',
            //     'echarts': 'echarts',
            //     'vue-router': 'VueRouter',
            //     'nprogress': 'NProgress',
            //     'element-ui': 'ELEMENT'
            // })
        })
        config.optimization.minimizer('terser').tap((args) => {
            args[0].terserOptions.compress.drop_console = true
            return args
        })
        config.when(process.env.NODE_ENV === 'development', config => {
            config.plugin('html').tap(args => {
                args[0].title = '开发'
                args[0].isProd = false
                return args
            })
        })
        config.when(process.env.NODE_ENV === 'mock', config => {
            config.plugin('html').tap(args => {
                args[0].title = 'mock'
                return args
            })
        })
        config.externals({ './cptable': 'var cptable' })

    },
    // webpack配置
    configureWebpack: {
        output: {
            filename: `js/[name].${Timestamp}.js`,
            chunkFilename: `js/[name].${Timestamp}.js`,
        },
        plugins: [
            // new BundleAnalyzerPlugin()
            // HappyPack 多线程打包
            new HappyPack({
                id: 'happybabel',
                loaders: ['babel-loader'],
                threadPool: happyThreadPool
            }),
            // Gzip压缩
            new CompressionPlugin({
                test: /\.(js|css)(\?.*)?$/i, // 需要压缩的文件正则
                threshold: 1024, // 文件大小大于这个值时启用压缩
                deleteOriginalAssets: false // 压缩后保留原文件
            }),
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
            })
        ],
        // 配置模块解析
        resolve: {
            // 配置省略文件路径的后缀名
            extensions: ['.js', '.json', '.vue', 'scss'],
            alias: {
                '@': resolve('src'),
                '@assets': resolve('src/assets'),
                '@mock': resolve('src/mock'),
                '@pages': resolve('src/pages'),
                '@utils': resolve('src/utils'),
                '~': resolve('src/assets/images')
            }
        }
        // 优化项
        // optimization: {
        //   minimizer: [
        //     new TerserPlugin({
        //       // 启用/禁用多进程并行运行。
        //       parallel: true,
        //       terserOptions: {
        //         compress: {
        //           warnings: false,
        //           drop_console: true, // console
        //           drop_debugger: false, // debugger
        //           pure_funcs: ['console.log'] // 移除console
        //         }
        //       }
        //     })
        //   ]
        // }
    }
}